<template>
  <view class="earnings-page">

    <!-- 顶部收益展示区域 -->
    <view class="earnings-header">
      <view class="earnings-content">
        <view class="earnings-main">
          <view class="earnings-wrapper">
            <view class="earnings-left">
              <view class="earnings-amount-row">
                <view class="earnings-amount">
                  <text class="currency-symbol">¥</text>
                  <text class="amount-number">{{ balance }}</text>
                </view>
                <button class="withdraw-btn" @click="goToWallet">提现</button>
              </view>
              <view class="earnings-label-container" @click="goToEarningsDetail">
                <text class="earnings-label">累计服务费分成</text>
                <image class="earnings-icon" src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/activity_pile/full.png" mode="aspectFit"></image>
              </view>
            </view>
          
          </view>
        </view>
        <view class="charging-pile-icon">
          <!-- 充电桩图标区域 -->
        </view>
      </view>
    </view>

    <!-- 邀请奖励区域 -->
    <view class="invite-rewards">
      <view class="section-title">邀请奖励</view>
      <view class="rewards-container">
        <view class="reward-item" @click="goToRewardDetail(0)">
          <view class="reward-info">
            <text class="reward-amount">¥{{ earningsData.invitedBounty || 0 }}</text>
            <text class="reward-count">({{ earningsData.directNum || 0 }}人)</text>
            <image class="invite-icon" src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/activity_pile/yaoqing%E5%A4%87%E4%BB%BD%402x.png" mode="aspectFit"></image>
          </view>
          <text class="reward-desc">直接奖励：¥{{ earningsData.directBountyLimit || 0 }} ({{ earningsData.directLimit || 0 }}人)</text>
        </view>

        <view class="reward-item" @click="goToRewardDetail(1)">
          <view class="reward-info">
            <text class="reward-amount">¥{{ earningsData.indirectInviterBounty || 0 }}</text>
            <text class="reward-count">({{ earningsData.indirectNum || 0 }}人)</text>
            <image class="invite-icon" src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/activity_pile/yaoqing%E5%A4%87%E4%BB%BD%402x.png" mode="aspectFit"></image>
          </view>
          <text class="reward-desc">间接奖励：¥{{ earningsData.indirectBountyLimit || 0 }} ({{ earningsData.indirectLimit || 0 }}人)</text>
        </view>
      </view>
    </view>

    <!-- 充电桩使用情况 -->
    <view class="usage-stats">
      <view class="section-title Second">充电桩使用情况</view>
      <view class="usage-stats-content">
<!-- 统计数据 -->
      <view class="stats-row">
        <view class="stat-item">
          <text class="stat-amount">¥{{ (parseFloat(earningsData.directFee || 0) + parseFloat(earningsData.indirectFee || 0)).toFixed(2) }}</text>
          <text class="stat-label">昨日：{{ earningsData.chargeCount || 0 }}次/{{ earningsData.chargePower || 0 }}度电</text>
        </view>
        <view class="stat-item">
          <text class="stat-amount">¥{{ (parseFloat(earningsData.directFee || 0) + parseFloat(earningsData.indirectFee || 0)).toFixed(2) }}</text>
          <text class="stat-label">累计：{{ earningsData.chargeCount || 0 }}次/{{ earningsData.chargePower || 0 }}度电</text>
        </view>
      </view>

      <!-- 时间筛选 -->
      <view class="time-filter">
        <view
          v-for="(filter, index) in timeFilters"
          :key="index"
          :class="['filter-item', activeTimeFilter === filter.value ? 'active' : 'others']"
          @click="setTimeFilter(filter.value)"
        >
          {{ filter.label }}
        </view>
      </view>

      <!-- 充电记录列表 -->
      <view class="charging-records">
        <view
          v-for="record in chargingRecords"
          :key="record.id"
          class="record-item"
          @click="goToRecordDetail(record)"
        >
          <view class="record-info">
            <text class="record-id">{{ record.plateNumber }}</text>
            <text class="record-details">充电情况：{{ record.duration }}/{{ record.degree }}度电</text>
            <text class="record-time">支付时间：{{ record.payTime }}</text>
          </view>
          <text class="record-amount">¥{{ record.amount }}</text>
        </view>
      </view>
      </view>

    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import PileApi from '@/api/pile/pile.js'
import { HomeApi } from '@/api/index.js'
import NumberUtils from '@/utils/numberUtils.js'

const balance = ref(0.00);

// 收益数据
const earningsData = ref({
  // 累计服务费分成
  directFee: '0.00',
  indirectFee: '0.00',
  // 邀请相关数据
  directNum: 0,
  indirectNum: 0,
  directLimit: 0,
  indirectLimit: 0,
  invitedBounty: 0,
  indirectInviterBounty: 0,
  directBountyLimit: 0,
  indirectBountyLimit: 0,
  // 充电统计
  chargeCount: 0,
  chargePower: '0.00'
})

// 时间筛选选项
const timeFilters = ref([
  { label: '今日', value: 'today' },
  { label: '昨日', value: 'yesterday' },
  { label: '本周', value: 'week' },
  { label: '本月', value: 'month' }
])

// 当前选中的时间筛选
const activeTimeFilter = ref('today')

// 充电记录数据
const chargingRecords = ref([
  // {
  //   id: '1',
  //   plateNumber: '皖A08754',
  //   duration: '1小时12分钟',
  //   degree: '50',
  //   payTime: '2025年8月11日 11:00:00',
  //   amount: '50.00'
  // },
  // {
  //   id: '2',
  //   plateNumber: '皖A09999',
  //   duration: '1小时12分钟',
  //   degree: '50',
  //   payTime: '2025年8月11日 11:00:00',
  //   amount: '47.55'
  // },
  // {
  //   id: '3',
  //   plateNumber: '皖A09999',
  //   duration: '1小时12分钟',
  //   degree: '50',
  //   payTime: '2025年8月11日 11:00:00',
  //   amount: '47.55'
  // }
])

// 加载收益数据
const loadEarningsData = async () => {
  try {
    const data = await PileApi.getIncome()
    // 直接更新收益数据
    earningsData.value = {
      ...earningsData.value,
      ...data
    }
  } catch (error) {
    console.error('获取收益数据失败:', error)
    uni.showToast({
      title: '获取收益数据失败',
      icon: 'none'
    })
  }
}

// 设置时间筛选
const setTimeFilter = (filter) => {
  activeTimeFilter.value = filter
  loadChargingRecords(filter)
}

// 加载充电记录
const loadChargingRecords = async (filter) => {
  try {
    const data = await PileApi.getIncomeParticulars(0)
    // 直接更新充电记录数据
    if (data.records) {
      chargingRecords.value = data.records
    }
  } catch (error) {
    console.error('获取收益明细失败:', error)
    uni.showToast({
      title: '获取收益明细失败',
      icon: 'none'
    })
  }
}


const getMyInfo = async () => {
  try {
    const userInfo = await HomeApi.getMyInfo()
    balance.value = NumberUtils.formatBalance(userInfo.balance)
  } catch (error) {
    console.error('获取用户信息失败:', error)
    // 保持默认值
  }
}


// 跳转到服务费分成详情
const goToEarningsDetail = () => {
  uni.navigateTo({
    url: '/pages/activity/shared-pile/earnings-detail'
  })
}

// 跳转到钱包页面
const goToWallet = () => {
  uni.navigateTo({
    url: '/pages/balance/balance'
  })
}

// 跳转到奖励详情
const goToRewardDetail = (type) => {
    uni.navigateTo({
      url: `/pages/activity/shared-pile/inviter-detail?type=${type}`
    })
}

// 跳转到记录详情
const goToRecordDetail = (record) => {
  uni.showToast({
    title: `查看充电记录详情: ${record.plateNumber}`,
    icon: 'none'
  })
}

// 页面加载时执行
onMounted(() => {
  getMyInfo()
  loadEarningsData()
  loadChargingRecords('today')
})

// 暴露方法给父组件调用
defineExpose({
  getMyInfo,
  loadEarningsData,
  loadChargingRecords
})
</script>

<style scoped>
.earnings-page {
  /* min-height: 100vh; */
  background-color: #ffff;
}

/* 顶部收益展示区域 */
.earnings-header {
  background-image: url('https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/activity_pile/bg_charge2%402x.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40rpx 30rpx 60rpx;
  margin-bottom: 30rpx;
  height:200rpx;
}

.earnings-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.earnings-main {
  flex: 1;
  padding-top: 40rpx;
}

.earnings-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.earnings-left {
  flex: 1;
}

.earnings-right {
  display: flex;
  align-items: center;
  padding-right: 30rpx;
}

.earnings-amount-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  padding-left: 35rpx;
  padding-right: 230rpx;
  gap: 20rpx;
  align-items: baseline;

}

.earnings-amount {
    display: flex;
    align-items: baseline;
  }

.currency-symbol {
  font-size: 42rpx;
  font-weight: 600;
  color: #1DCFB7;
  margin-right: 4rpx;
}

.amount-number {
  font-size: 80rpx;
  font-weight: 600;
  color: #1DCFB7;
}

.earnings-label-container {
  display: flex;
  align-items: center;
  padding-left: 55rpx;
  cursor: pointer;
}

.earnings-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-right: 16rpx;
}

.earnings-icon {
  width: 24rpx;
  height: 24rpx;
}

.withdraw-btn {
    background: #fff;
    color: #1DCFB7;
    border: 2rpx solid #1DCFB7;
    border-radius: 10rpx;
    padding: 6rpx 12rpx;
    font-size: 28rpx;
    font-weight: 500;
    min-width: 100rpx;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
    height: 45rpx;
  }

.charging-pile-icon {
  width: 120rpx;
  height: 120rpx;
  /* 这里可以添加充电桩图标 */
}

/* 邀请奖励区域 */
.invite-rewards {
  background-color: #fff;
  border-radius: 20rpx;
  /* padding: 30rpx; */
  margin: 0 30rpx 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  padding-left: 15rpx;
}
.section-title.Second{
  padding-left: 40rpx;
}

.rewards-container {
  border: 2rpx solid #1DCFB7;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  gap: 20rpx;
}

.reward-item {
  flex: 1;
  padding: 20rpx;
  cursor: pointer;
}

.reward-info {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.reward-amount {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-right: 8rpx;
}

.reward-count {
  font-size: 24rpx;
  color: #666;
  margin-right: 8rpx;
}

.invite-icon {
  width: 32rpx;
  height: 32rpx;
}

.reward-desc {
  font-size: 24rpx;
  color: #999;
  line-height: 1.4;
}

/* 充电桩使用情况 */
.usage-stats {
  background-color: #ffff;
  /* border-radius: 20rpx;
  padding: 30rpx;
  margin: 0 30rpx; */
}
.usage-stats-content{
  background: linear-gradient( 180deg, #F7F8FB 0%, #FFFFFF 100%);
  border-radius: 20rpx;
  padding: 30rpx;
  border: 1rpx solid#E5E5E5 ;
  margin: 0 30rpx;
}
.stats-row {
  display: flex;
  margin-bottom: 30rpx;
}

.stat-item {
  flex: 1;
  /* text-align: center; */
  padding: 0 20rpx;
}

.stat-item:first-child {
  /* border-right: 1rpx solid #f0f0f0; */
}

.stat-amount {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
}

/* 时间筛选 */
.time-filter {
  display: flex;
  margin-bottom: 30rpx;
  /* gap: 20rpx; */
  background-color:#f0f0f0 ;
  border-radius: 100rpx;
  text-align: center;
}

.filter-item {
  padding: 16rpx 32rpx;
  border-radius: 32rpx;
  font-size: 26rpx;
  color: black;
  background-color: #f0f0f0 ;
  cursor: pointer;
  transition: all 0.3s ease;
  width:100rpx;
}

.filter-item.active {
  background-color: #FF6B35;
  color: #fff;
  width:100rpx;
}
.filter-item.others{
  /* padding-left: 80rpx; */
}
/* 充电记录列表 */
.charging-records {
  margin-top: 20rpx;
}

.record-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  cursor: pointer;
}

.record-item:last-child {
  border-bottom: none;
}

.record-info {
  flex: 1;
}

.record-id {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.record-details {
  font-size: 25rpx;
  color: #7A7A7C;
  display: block;
  margin-bottom: 8rpx;
}

.record-time {
  font-size: 25rpx;
  color: #7A7A7C;
}

.record-amount {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  padding-bottom:80rpx;
}
</style>
